<template>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" top="40px" append-to-body
        :close-on-click-modal="false" :lock-scroll="false" :show-close="false">
        <el-form ref="childPageForm" :model="newChildPage" label-width="80px">
            <el-form-item label="栏目名称">
                <el-input v-model="newChildPage.name" placeholder="请输入子栏目名称" />
            </el-form-item>
            <!-- 添加更多表单项 -->
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveChildPage">保存</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { EventBus } from "@/EventBus"; // 假设EventBus.js位于src目录下
import { getUser } from "@/utils/auth";


export default {
    props: {
        dialogTitle: {
            type: String,
            default: "新增子栏目",
        },
    },
    data() {
        return {
            parentId: 0,
            dialogVisible: false,
            newChildPage: {
                name: "",
            },
        };
    },
    methods: {
        visible(parentId) {
            this.dialogVisible = true;
            this.parentId = parentId;
        },

        hidden() {
            this.dialogVisible = false;
        },

        async saveChildPage() {
            if (!this.newChildPage.name) {
                return this.$message.error("请输入栏目名称");
            }
            const userInfo = getUser();

            const { code } = await this.$fetch.post("/api/directory/create", {
                name: this.newChildPage.name,
                parentId: this.parentId,
                creator: userInfo.account,
            });
            if (code === 0) {
                EventBus.$emit("menuRefresh");
                this.$message.success("成功");
            }
            this.dialogVisible = false;
            this.newChildPage.name = "";
        },
    },
};
</script>
